<!--智慧招商-->
<template>
    <div class="rightView">
        <transition name="animationRL">
            <div v-show="shows" style="display: flex;flex-direction: column">
                <div class="container">
                    <div class="container_title3">
                        <span>项目跟踪矩阵</span>
                    </div>
                    <div class="trackContainer userFlex" ref="itemBox" @mouseenter="stopAutoScroll"
                         @mouseleave="startAutoScroll">
                        <div class="track" v-for="(item, index) in intentionprojectData" :key="index"
                             @click="jump()">
                            <div class="titleBox">
                                <div class="icon"></div>
                                <span class="name">{{ item.projectName }}</span>
                            </div>
                            <div class="marginL21">
                                <span class="type">项目状态:</span>
                                <span class="type">{{ item.projectStage }}</span>
                                <span class="type time">跟进日期:</span>
                                <span class="type" style="color: #1CF0BC">{{ transferTime(item.followDate) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="container_title3">
                        <span>近两年意向项目情况</span>
                    </div>
                    <div style="display: flex;flex-direction: row;align-items: center">
                        <div class="intentionStyle" ref="intentionEcharts"></div>
                        <div class="container_intention">
                            <div class="container_intention_bg"></div>
                            <div class="intentionContainerPadding" style="display: flex;flex-direction: column">
                                <div style="display: flex;flex-direction: row">
                                    <span class="container_intention_title" style="text-align: left">项目阶段</span>
                                    <span class="container_intention_title">上年度</span>
                                    <span class="container_intention_title">本年度</span>
                                    <span class="container_intention_title">同比</span>
                                </div>


                                <!--              lastYearNum-->
                                <!--              :-->
                                <!--              1-->
                                <!--              projectStage-->
                                <!--              :-->
                                <!--              "前期洽谈"-->
                                <!--              thisYearNum-->
                                <!--              :-->
                                <!--              2-->
                                <!--              yoy-->
                                <!--              :-->
                                <!--              100-->
                                <el-scrollbar class="statistical-scrollbar">
                                    <div style="display: flex;flex-direction: column"
                                         v-for="(item,index) in statisticalData"
                                         :key="index">
                                        <div style="display: flex;flex-direction: row">
                                            <span class="container_intention_type">{{ item.projectStage }}</span>
                                            <span class="container_intention_num">{{ item.lastYearNum }}</span>
                                            <span class="container_intention_num">{{ item.thisYearNum }}</span>
                                            <span class="container_intention_num" style="color:#FFB508;">{{
                                                item.yoy
                                                }}%</span>
                                        </div>
                                        <div class="container_intention_line"></div>
                                    </div>
                                </el-scrollbar>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <div class="shrink" @click="shows=!shows"></div>
    </div>
</template>

<script>
import pieEcharts from "echarts";
import * as echarts from "echarts";
import {intentionproject, histogram, statistical} from "@/api/axios";
import moment from "moment";

export default {
    name: "floatLeft",
    data() {
        return {
            shows: true,
            intentionprojectData: [],//项目跟踪矩阵
            histogramData: [],//意向项目情况
            statisticalData: [],//意向项目同比
            itemStyle0: {
                normal: {
                    barBorderRadius: 10,
                    label: {
                        show: true, //开启显示数值
                        position: 'top', //数值在上方显示
                        textStyle: {  //数值样式
                            color: '#56AFE2',   //字体颜色
                            fontSize: 8  //字体大小
                        }
                    },
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(29, 247, 255,1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(29, 247, 255, 0)',
                        },
                    ]),
                },
            },
            itemStyle1: {
                normal: {
                    barBorderRadius: 10,
                    label: {
                        show: true, //开启显示数值
                        position: 'top', //数值在上方显示
                        textStyle: {  //数值样式
                            color: '#56AFE2',   //字体颜色
                            fontSize: 8  //字体大小
                        }
                    },
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(249, 231, 33, 1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(8, 145, 33, 0)',
                        },
                    ]),
                },
            },
            scrollSpeed: 70, // 滚动速度，值越小滚动越块
            scrollTop: 0, // 添加这个变量
            contentHeight: 0, // 添加这个变量
        }
    },
    mounted() {
        this.startAutoScroll()
        this.intentionproject()
        this.histogram()
        this.statistical()

    },
    beforeDestroy() {
        this.stopAutoScroll(); // 组件销毁前停止滚动
    },
    methods: {
        stopAutoScroll() {
            clearInterval(this.scrollInterval);
        },
        // 鼠标离开事件处理程序，用于重新开始自动滚动
        startAutoScroll() {
            this.stopAutoScroll(); // 首先停止任何现有的滚动
            const container = this.$refs.itemBox;
            // const containerHeight = container.clientHeight;
            const contentHeight = container.scrollHeight;
            let scrollTop = 0;
            const scroll = () => {
                scrollTop += 1;
                if (scrollTop >= contentHeight- 253) {
                    scrollTop = 0;
                }
                container.scrollTop = scrollTop;
            };
            this.scrollInterval = setInterval(scroll, this.scrollSpeed);
        },
        initIntention() {//初始化项目意向
            var echarts = require('echarts');
            let option = {
                grid: {
                    left: "10%",
                    right: "10%",
                    bottom: "10%",
                    top: "10%",
                    containLabel: true,
                },
                backgroundColor: "",
                yAxis: {
                    type: "value",
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#ffffff",
                            fontSize: 8
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'line',
                            color: 'rgba(92,155,181)',
                            width: 0.1,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'line',
                            color: '#2A6FDA',
                            width: 1,
                        },
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 8
                            },
                        },
                        data: this.histogramData.xaxis,
                    },
                ],
                series: this.histogramData.series,
            };
            echarts.init(this.$refs.intentionEcharts).setOption(option);
        },
        intentionproject() {//项目跟踪矩阵
            let _this = this
            intentionproject().then((res) => {
                _this.intentionprojectData = res.list
            })
        },
        //时间格式转换
        transferTime(time) {
            if (time) {
                return moment(time).format('YYYY.MM.DD')
            }
            return ''
        },
        histogram() {//意向项目情况
            let _this = this
            histogram().then((res) => {
                _this.histogramData = res
                _this.histogramData.series.forEach(function (item, index) {
                    item.type = "bar"
                    item.barWidth = 10
                    item.data = item.datas
                    if (index == 0) {
                        item.itemStyle = _this.itemStyle0
                    } else
                        item.itemStyle = _this.itemStyle1
                })
                var redEcharts = require('echarts').init(this.$refs.intentionEcharts);
                var redoption = redEcharts.getOption();
                if (redoption) {
                    redEcharts.clear();
                    redEcharts.setOption(redoption);
                }
                _this.initIntention()
            })
        },
        statistical() {//意向项目同比
            let _this = this
            statistical().then((res) => {
                _this.statisticalData = res
            })
        },
    }
}
</script>

<style lang="scss">

.height200 {
  width: 570px;
  height: 200px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.statistical-scrollbar {
  width: 220px;
  height: 130px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .height200 {
    height: calHeight_2k(200px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }

  .statistical-scrollbar {
    height: calHeight_2k(130px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.time {
  margin-left: 15px;
}

.marginL21 {
  width: 240px;
  height: 20px;
  margin-left: 21px
}

.marginL13 {
  margin-left: 6px;
}

.rightView {
  float: right;
  margin-top: 20px;
  display: flex;
  height: 630px;
  flex-direction: row;
  align-items: center;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink_r.png");
  }

  .container {
    width: 584px;
    height: 273px;
    padding-left: 22px;
    background-size: 100% 100%;
    display: flex;
    background-image: url("@/assets/bg_left1.png");
    flex-direction: column;

    &_title3 {
      width: 526px;
      height: 24px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_intention {
      width: 238px;
      position: relative;
      height: 161px;

      &_line {
        width: 100%;
        height: 1px;
        background: #EEEBE9;
        opacity: 0.4;
      }

      &_bg {
        position: absolute;
        width: 238px;
        height: 161px;
        background: #19508E;
        opacity: 0.36;
      }

      &_title {
        text-align: center;
        width: 25%;
        height: 18px;
        line-height: 18px;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.4;
      }

      &_type {
        width: 25%;
        height: 30px;
        line-height: 30px;
        font-size: 9px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
      }

      &_num {
        width: 23%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

}

.trackContainer {
  //display: flex;
  //flex-direction: row;
  //justify-content: space-between;
  //flex-wrap: wrap;
  width: 97%;
  overflow-y: auto;
  height: 300px !important;


  .track {
    width: calc((100% - 10px) / 2);
    height: 41px;
    display: inline-flex;
    margin-top: 5px;
    flex-direction: column;
    justify-content: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_track.png");

    &:nth-child(2n) {
      margin-left: 10px;
    }

    .titleBox {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 5px;
    }

    .icon {
      width: 14px !important;
      height: 14px !important;
      background-size: 100% 100%;
      background-image: url("@/assets/icon_track.png");
    }

    .name {
      margin-left: 7px;
      height: 18px;
      padding-right: 5px;
      font-size: 10px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #1CFDFF;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .type {
      //white-space: nowrap;
      margin-top: 5px;
      height: 8px;
      font-size: 8px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 8px;
      overflow: hidden; /* 控制超出部分隐藏 */
      word-break: break-all; /* 超出部分强制换行 */
    }
  }
}

.intentionStyle {
  width: 300px;
  height: 200px;
}

.intentionContainerPadding {
  padding: 10px 16px 0px 15px;
}

.userFlex {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .marginL21 {
    height: calHeight_2k(20px);
  }

  .marginL13 {
    margin-left: calHeight_2k(6px);
  }

  .rightView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);
    position: relative;
    z-index: 3;

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      height: calHeight_2k(273px);

      &_title3 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_intention {
        height: calHeight_2k(161px);

        &_line {
          height: calHeight_2k(1px);
        }

        &_bg {
          height: calHeight_2k(161px);
        }

        &_title {
          height: calHeight_2k(18px);
          line-height: calHeight_2k(18px);
        }

        &_type {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }

        &_num {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }
      }
    }

  }

  .trackContainer {
    height: calHeight_2k(300px);

    .track {
      height: calHeight_2k(41px);
      margin-top: calHeight_2k(5px);

      .titleBox {
        margin-top: calHeight_2k(5px);
      }

      .icon {
        height: calHeight_2k(14px);
      }

      .name {
        height: calHeight_2k(18px);
        line-height: calHeight_2k(18px);
      }

      .type {
        margin-top: calHeight_2k(5px);
        height: calHeight_2k(8px);
        line-height: calHeight_2k(8px);
      }
    }
  }

  .intentionStyle {
    height: calHeight_2k(200px);
  }

  .intentionContainerPadding {
    padding-top: calHeight_2k(10px);
    padding-bottom: calHeight_2k(0px);
  }
}

</style>
